<template>
  <div class="enterpage">
    <div class="info_list">
      <p @click="getCity">
        服务城市
        <span>
          <em>{{cityNameText}}</em>
          <img src="@/assets/imgs/arrow_right.png" />
        </span>
      </p>
      <h6>个人信息</h6>
      <p @click="idImgBtn">
        身份证照片
        <span>
          <em>{{idText}}</em>
          <img src="@/assets/imgs/arrow_right.png" />
        </span>
      </p>
      <p @click="driverImgBtn">
        驾驶证照片
        <span>
          <em>{{driverText}}</em>
          <img src="@/assets/imgs/arrow_right.png" />
        </span>
      </p>
      <p>
        真实姓名
        <span>
          <em>
            <input type="text" placeholder="请输入" v-model="userName" />
          </em>
        </span>
      </p>
      <p>
        身份证号
        <span>
          <em>
            <input type="text" placeholder="请输入" v-model="idNumber" @blur="codeBlur" />
          </em>
        </span>
      </p>
      <p @click="getsex">
        性别
        <span>
          <em>{{sexText}}</em>
          <img src="@/assets/imgs/arrow_right.png" />
        </span>
      </p>
      <p @click="licenseShow">
        初次领取驾照日期
        <span>
          <em>{{licenseDate}}</em>
          <img src="@/assets/imgs/arrow_right.png" />
        </span>
      </p>
      <p @click="drivingTypeBtn">
        准驾车型
        <span>
          <em>{{drivingType}}</em>
          <img src="@/assets/imgs/arrow_right.png" />
        </span>
      </p>
      <div v-show="iscar==1">
        <h6>行驶证信息</h6>
        <p @click="licenseImgBtn">
          行驶证照片
          <span>
            <em>{{licenseText}}</em>
            <img src="@/assets/imgs/arrow_right.png" />
          </span>
        </p>
        <div class="card_number_ct">
          <div class="card_number">
            <span>{{ abbreviation }}</span>
            <i></i>
            <span @click="getCardNumber">
              <b>{{ licenseplate }}</b>
              <img src="@/assets/imgs/sanjiao.png" />
            </span>
          </div>
          <p>
            车牌号
            <span>
              <em>
                <input type="text" placeholder="请输入" v-model="carNumber" />
              </em>
            </span>
          </p>
        </div>
        <p>
          车辆型号
          <span>
            <em>
              <input type="text" placeholder="如：奥迪A6 银" v-model="carType" />
            </em>
          </span>
        </p>
        <p>
          车辆所有人
          <span>
            <em>
              <input type="text" placeholder="请输入车主姓名" v-model="carName" />
            </em>
          </span>
        </p>
        <p @click="carDtaeBtn">
          车辆注册日期
          <span>
            <em>{{carDate}}</em>
            <img src="@/assets/imgs/arrow_right.png" />
          </span>
        </p>
        <p @click="totalPassengerBtn">
          载客数
          <span>
            <em>{{totalPassenger}}</em>
            <img src="@/assets/imgs/arrow_right.png" />
          </span>
        </p>
        <p @click="carPeopleImgBtn">
          人车合影
          <span>
            <em>{{carPeopleText}}</em>
            <img src="@/assets/imgs/arrow_right.png" />
          </span>
        </p>
      </div>
    </div>
    <p class="btn_sub" @click="driverSubBtn">提交申请</p>
    <!--身份证上传-->
    <div class="showcardphoto" v-show="showcardIdphoto">
      <div class="quickCard_box">
        <div class="showcardimg_box" v-if="isweixin">
          <p v-if="identityPositiveUrl" @click="identityPositiveUpload">
            <img :src="identityPositiveUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="identityPositiveUpload">
            <img src="@/assets/imgs/idz.png" />
            <span>点击上传</span>
          </p>
          <p v-if="identityReverseUrl" @click="identityReverseUpload">
            <img :src="identityReverseUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="identityReverseUpload">
            <img src="@/assets/imgs/idf.png" />
            <span>点击上传</span>
          </p>
        </div>
        <div class="showcardimg_box" v-else>
          <div>
            <md-image-reader name="reader1" @complete="onImgComplete" :mime="['jpg','png','jpeg']"></md-image-reader>
            <p v-if="identityPositiveUrl">
              <img :src="identityPositiveUrl" />
              <span>点击上传</span>
            </p>
            <p v-else>
              <img src="@/assets/imgs/idz.png" />
              <span>点击上传</span>
            </p>
          </div>
          <div>
            <md-image-reader name="reader2" @complete="onImgComplete" :mime="['jpg','png','jpeg']"></md-image-reader>
            <p v-if="identityReverseUrl">
              <img :src="identityReverseUrl" />
              <span>点击上传</span>
            </p>
            <p v-else>
              <img src="@/assets/imgs/idf.png" />
              <span>点击上传</span>
            </p>
          </div>
        </div>
        <div class="showcardtext">
          <h6>身份证正反面</h6>
          <p>
            请按照示例图提交照片信息
            确保对齐、文字清晰、无反光、无遮挡
          </p>
        </div>
        <p class="cardBtn">
          <span class="cardcannel" @click="identityCannelBtn">取消</span>
          <span class="cardupload" @click="identityUploadBtn">上传</span>
        </p>
      </div>
    </div>
    <!--驾驶证上传-->
    <div class="showcardphoto" v-show="showdriverlicensephoto">
      <div class="quickCard_box">
        <div class="showcardimg_box" v-if="isweixin">
          <p v-if="cardPositiveUrl" @click="cardPositiveUpload">
            <img :src="cardPositiveUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="cardPositiveUpload">
            <img src="@/assets/imgs/sfxx_jsz_zheng@2x.png" />
            <span>点击上传</span>
          </p>
          <p v-if="cardReverseUrl" @click="cardReverseUpload">
            <img :src="cardReverseUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="cardReverseUpload">
            <img src="@/assets/imgs/sfxx_jsz_bei@2x.png" />
            <span>点击上传</span>
          </p>
        </div>
        <div class="showcardimg_box" v-else>
          <div>
            <md-image-reader name="reader3" @complete="onImgComplete" :mime="['jpg','png','jpeg']"></md-image-reader>
            <p v-if="cardPositiveUrl">
              <img :src="cardPositiveUrl" />
              <span>点击上传</span>
            </p>
            <p v-else>
              <img src="@/assets/imgs/sfxx_jsz_zheng@2x.png" />
              <span>点击上传</span>
            </p>
          </div>
          <div>
            <md-image-reader name="reader4" @complete="onImgComplete" :mime="['jpg','png','jpeg']"></md-image-reader>
            <p v-if="cardReverseUrl">
              <img :src="cardReverseUrl" />
              <span>点击上传</span>
            </p>
            <p v-else>
              <img src="@/assets/imgs/sfxx_jsz_bei@2x.png" />
              <span>点击上传</span>
            </p>
          </div>
        </div>
        <div class="showcardtext">
          <h6>驾驶证正反面</h6>
          <p>
            请按照示例图提交照片信息
            确保对齐、文字清晰、无反光、无遮挡
          </p>
        </div>
        <p class="cardBtn">
          <span class="cardcannel" @click="driverLicenCannelBtn">取消</span>
          <span class="cardupload" @click="cardUploadBtn">上传</span>
        </p>
      </div>
    </div>
    <!--行驶证上传-->
    <div class="showcardphoto" v-show="showcardphoto">
      <div class="quickCard_box">
        <div class="showcardimg_box" v-if="isweixin">
          <p v-if="licensePositiveUrl" @click="licensePositiveUpload">
            <img :src="licensePositiveUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="licensePositiveUpload">
            <img src="@/assets/imgs/taxi_xsz_zheng@2x.png" />
            <span>点击上传</span>
          </p>
          <p v-if="licenseReverseUrl" @click="licenseReverseUpload">
            <img :src="licenseReverseUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="licenseReverseUpload">
            <img src="@/assets/imgs/taxi_xsz_bei@2x.png" />
            <span>点击上传</span>
          </p>
        </div>
        <div class="showcardimg_box" v-else>
          <div>
            <md-image-reader name="reader5" @complete="onImgComplete" :mime="['jpg','png','jpeg']"></md-image-reader>
            <p v-if="licensePositiveUrl">
              <img :src="licensePositiveUrl" />
              <span>点击上传</span>
            </p>
            <p v-else>
              <img src="@/assets/imgs/taxi_xsz_zheng@2x.png" />
              <span>点击上传</span>
            </p>
          </div>
          <div>
            <md-image-reader name="reader6" @complete="onImgComplete" :mime="['jpg','png','jpeg']"></md-image-reader>
            <p v-if="licenseReverseUrl">
              <img :src="licenseReverseUrl" />
              <span>点击上传</span>
            </p>
            <p v-else>
              <img src="@/assets/imgs/taxi_xsz_bei@2x.png" />
              <span>点击上传</span>
            </p>
          </div>
        </div>
        <div class="showcardtext">
          <h6>行驶证正反面</h6>
          <p>
            请按照示例图提交照片信息
            确保对齐、文字清晰、无反光、无遮挡
          </p>
        </div>
        <p class="cardBtn">
          <span class="cardcannel" @click="licenseCannelBtn">取消</span>
          <span class="cardupload" @click="licenseUploadBtn">上传</span>
        </p>
      </div>
    </div>
    <!--人车合影上传-->
    <div class="showcardphoto" v-show="showMancarphoto">
      <div class="quickCard_box">
        <div class="showcardimg_box" v-if="isweixin">
          <p v-if="mancarUrl" @click="mancarReverseUpload">
            <img :src="mancarUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="mancarReverseUpload">
            <img src="@/assets/imgs/taxi_clxx_rchy@2x.png" />
            <span>点击上传</span>
          </p>
        </div>
        <div class="showcardimg_box" v-else>
          <md-image-reader name="reader7" @complete="onImgComplete" :mime="['jpg','png','jpeg']"></md-image-reader>
          <p v-if="mancarUrl" @click="mancarReverseUpload">
            <img :src="mancarUrl" />
            <span>点击上传</span>
          </p>
          <p v-else @click="mancarReverseUpload">
            <img src="@/assets/imgs/taxi_clxx_rchy@2x.png" />
            <span>点击上传</span>
          </p>
        </div>
        <div class="showcardtext">
          <h6>人车合影</h6>
          <p>
            请按照示例图提交照片信息
            确保对齐、文字清晰、无反光、无遮挡
          </p>
        </div>
        <p class="cardBtn">
          <span class="cardcannel" @click="mancarCannelBtn">取消</span>
          <span class="cardupload" @click="mancarUploadBtn">上传</span>
        </p>
      </div>
    </div>
    <!--选择城市-->
    <!-- <md-popup v-model="cityModel" position="bottom" @hide="cancel">
            <md-popup-title-bar title="司机地区" ok-text="确认" cancel-text="取消" @confirm="getregion" @cancel="cancel"></md-popup-title-bar>
            <div class="pop_box">
                <div class="pop_box_hd">
                    <ul>
                        <li @click="provinceBtn">
                            <p>{{provinceName}}</p>
                            <span>
                                <img src="@/assets/imgs/sanjiao.png" />
                            </span>
                        </li>
                        <li @click="cityBtn">
                            <p>{{cityName}}</p>
                            <span>
                                <img src="@/assets/imgs/sanjiao.png" />
                            </span>
                        </li>
                        <li @click="countyBtn">
                            <p>{{countyName}}</p>
                            <span>
                                <img src="@/assets/imgs/sanjiao.png" />
                            </span>
                        </li>
                    </ul>
                </div>
                <div class="city_list" v-show="Isprovince">
                    <ul>
                        <li v-for="(item, index) in provinceData" :key="index" @click="getprovince(item.name,item.adcode)">{{item.name}}</li>
                    </ul>
                </div>
                <div class="city_list" v-show="Iscity">
                    <ul>
                        <li v-for="(item, index) in cityData" :key="index" @click="getcity(item.name,item.adcode)">{{item.name}}</li>
                    </ul>
                </div>
                <div class="city_list" v-show="Iscounty">
                    <ul>
                        <li
                            v-for="(item, index) in countyData"
                            :key="index"
                            @click="getcounty(item.name,item.adcode,index)"
                            :class="{active:Isactive==index}"
                        >{{item.name}}</li>
                    </ul>
                </div>
            </div>
    </md-popup>-->
    <!--选择城市-->
    <md-picker
      ref="cityTypePicker"
      v-model="cityModel"
      :data="cityTypeData"
      :cols="3"
      :default-index="cityIndexData"
      is-cascade
      title="司机地区"
      @confirm="cityTypeBtnConfirm"
    ></md-picker>
    <!--初次领取驾驶证日期-->
    <md-date-picker
      ref="datePicker"
      v-model="isDatePickerShow"
      title="初次领取驾照日期"
      :minDate="minDate"
      :maxDate="maxDate"
      :default-date="currentDate"
      :unit-text="unitText"
      @confirm="onDatePickerConfirm"
    ></md-date-picker>
    <!--性别-->
    <md-picker ref="sexTypePicker" v-model="sexTypeModel" :data="sexTypeData" :cols="1" is-cascade title="性别" @confirm="sexTypeBtnConfirm"></md-picker>
    <!--准驾车型-->
    <md-picker ref="drivingTypePicker" v-model="drivingTypeModel" :data="drivingTypeData" :cols="1" is-cascade title="准驾车型" @confirm="drivingTypeBtnConfirm"></md-picker>
    <!--车辆注册日期-->
    <md-date-picker
      ref="registerdatePicker"
      v-model="isRegisterDatePickerShow"
      :unit-text="unitText"
      title="车辆注册日期"
      :minDate="minDate"
      :maxDate="maxDate"
      :default-date="currentDate"
      @confirm="onRegisterDatePickerConfirm"
    ></md-date-picker>
    <!--车牌号-->
    <md-picker ref="carNumbePicker" v-model="isshowCardNumber" :data="cardNumberData" :cols="2" is-cascade title="车牌号" @confirm="carNumberConfirm()"></md-picker>
    <!--载客人数-->
    <md-picker
      ref="totalPassengerPicker"
      v-model="totalPassengerModel"
      :data="totalPassengerData"
      :cols="1"
      is-cascade
      title="载客人数"
      @confirm="totalPassengerBtnConfirm"
    ></md-picker>
  </div>
</template>

<script>
import { Tabs, Icon, Field, InputItem, Toast, Dialog, Picker, Popup, PopupTitleBar, DatePicker, ImageReader } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import http from '@/common/http';
import https from 'axios';
import WxUtils from '@/common/weixinUtils';
import CardNumber from '@/common/cardNumber';
import OSS from 'ali-oss';
import { fail } from 'assert';
let client = new OSS({
  region: 'oss-cn-qingdao',
  accessKeyId: 'LTAI0oUoBK7GwQn4',
  accessKeySecret: 'gHqAlhq2pX57Jz8XCO0zMLsKlZoAlX',
  bucket: 'pakj'
});
var moment = require('moment');
moment.locale('zh-cn');
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Picker.name]: Picker,
    [InputItem.name]: InputItem,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [ImageReader.name]: ImageReader,
    [DatePicker.name]: DatePicker
  },
  data() {
    return {
      title: '司机招募',
      isweixin: false,
      cityModel: false,
      cityIndexData: [],
      cityTypeData: [],
      iscar: '', // 判断有车加入还是无车加入 1有车 2 无车
      businessType: '', // 司机形式
      cityNameText: '请选择',
      provinceName: '省',
      cityName: '市',
      countyName: '区/县',
      provinceCode: '',
      cityCode: '',
      countyCode: '',
      provinceRegion: '', // 传入后台省的标识
      cityRegion: '', // 传入后台市的标识
      countryRegion: '', // 传入后台区县的标识
      Isprovince: true,
      Iscity: false,
      provinceData: [],
      cityData: [],
      countyData: [],
      Iscounty: false,
      districtSearch: null,
      Isactive: '',
      source: '',
      isDatePickerShow: false,
      minDate: new Date('1970/9/9'),
      maxDate: new Date(),
      currentDate: new Date(),
      unitText: ['', '', '', '', ''],
      idText: '请上传',
      driverText: '请上传',
      userName: '', // 司机姓名
      sexText: '请选择', // 司机性别
      sexValue: '',
      sexTypeModel: false,
      sexTypeData: [
        [
          { text: '男', value: '男' },
          { text: '女', value: '女' }
        ]
      ],
      cate: '',
      idNumber: '', // 司机身份证
      licenseDate: '请选择', // 第一次获取驾驶证时间
      drivingType: '请选择', // 准驾车型
      drivingTypeModel: false,
      drivingTypeData: [
        [
          { text: 'A1', value: 'A1' },
          { text: 'A2', value: 'A2' },
          { text: 'A3', value: 'A3' },
          { text: 'B1', value: 'B1' },
          { text: 'B2', value: 'B2' },
          { text: 'C1', value: 'C1' },
          { text: 'C2', value: 'C2' },
          { text: 'C3', value: 'C3' }
        ]
      ],
      licenseText: '请上传',
      carNumber: '', // 车牌号
      isshowCardNumber: false,
      cardNumberData: CardNumber.getdriverArea(),
      abbreviation: '京',
      licenseplate: 'A',
      carType: '', // 车辆型号
      carName: '', // 车辆所有人
      carDate: '请选择', //  车辆注册时间
      isRegisterDatePickerShow: false,
      totalPassenger: '请选择', // 载客数
      totalPassengerModel: false,
      totalPassengerData: [
        [
          { text: '5人', value: '5' },
          { text: '7人', value: '7' }
        ]
      ],
      carPeopleText: '请上传',
      showcardIdphoto: false,
      identityPositiveUrl: '', // 身份证正面url地址
      identityReverseUrl: '', // 身份证反面url地址
      showdriverlicensephoto: false,
      cardPositiveUrl: '', // 驾驶证正面url地址
      cardReverseUrl: '', // 驾驶证反面url地址
      showcardphoto: false,
      licensePositiveUrl: '', // 行驶证正面
      licenseReverseUrl: '', // 行驶证反面
      showMancarphoto: false,
      mancarUrl: '', // 人车合一
      identityPositiveImg: '', // 传入后台身份证正面url地址
      identityReverseImg: '', // 传入后台身份证反面url地址
      cardPositiveImg: '', // 传入后台驾驶证正面url地址
      cardReverseImg: '', // 传入后台驾驶证反面url地址
      licensePositiveImg: '', // 传入后台行驶证正面
      licenseReverseImg: '', // 传入后台行驶证反面
      mancarImg: '' // 传入后台人车合一
    };
  },
  created() {
    // this.AMPDistrictSearch('中国');
    // 判断是否在微信浏览器
    if (Utils.isWeixinBroswer()) {
      WxUtils.wxConfig(['chooseImage', 'getLocalImgData']);
    }
    let province = '';
    let city = '';
    let country = '';
    https.get('/json/province.json').then(res => {
      province = res.data;
      https.get('/json/city.json').then(res => {
        city = res.data;
        https.get('/json/country.json').then(res => {
          country = res.data;
          province.forEach((p, i) => {
            p.children = city[p.value];
            city[p.value].forEach((c, j) => {
              c.children = country[c.value];
            });
          });
          this.cityTypeData.push(province);
          this.cityIndexData = [0, 0, 0];
        });
      });
    });
  },
  mounted() {
    // 判断是否在微信浏览器
    if (Utils.isWeixinBroswer()) {
      this.isweixin = true;
    } else {
      this.isweixin = false;
    }
    if (this.$route.query.haveCar === '1') {
      this.iscar = 1; // 有车加入
    } else {
      this.iscar = 2; // 无车加入
    }
    if (this.$route.query.isCity === '1') {
      this.businessType = 1; // 城际
    } else {
      this.businessType = 2;
    }
    if (this.$route.query.cate === '1') {
      this.cate = '1';
    } else if (this.$route.query.cate === '2') {
      this.cate = '2';
    } else {
      this.cate = '1';
    }
    try {
      this.setHeader(this.title);
    } catch (e) {
      console.log(e);
    }
    // 资料回显
    let paramsDtae = sessionStorage.getItem('errMsg');
    if (paramsDtae) {
      let params = JSON.parse(paramsDtae);
      this.iscar = params.addType; // 有车加入 还是无车加入 1 有车 2 无车
      this.businessType = params.businessType;
      this.cityNameText =
        params.driverProvince.split('_')[1] + ' ' + params.driverCity.split('_')[1] + ' ' + params.driverCountry.split('_')[1];
      this.provinceRegion = params.driverProvince; // 传入后台省的标识
      this.cityRegion = params.driverCity; // 传入后台市的标识
      this.countryRegion = params.driverCountry; // 传入后台区县的标识
      this.identityPositiveUrl = params.identityHeadPortrait;
      this.identityReverseUrl = params.identityNationalEmblem;
      this.identityPositiveImg = params.identityHeadPortrait; // 回显身份证正面
      this.identityReverseImg = params.identityNationalEmblem; // 回显身份证正面
      this.cardPositiveUrl = params.drivingLicence;
      this.cardReverseUrl = params.drivingLicenceReverse;
      this.cardPositiveImg = params.drivingLicence; // 回显驾驶证正面
      this.cardReverseImg = params.drivingLicenceReverse; // 回显驾驶证正面
      this.idText = '重新上传';
      this.driverText = '重新上传';
      this.userName = params.driverName;
      this.idNumber = params.driverIdSource.replace(/\s+/g, '').replace(/(\S{6})(\S{4})(\S{4})(\S{4})/g, '$1 $2 $3 $4'); // 身份证号;
      this.licenseDate = moment(params.expiryInitiaLicenseDate, 'x').format('YYYY-MM-DD');
      this.drivingType = params.quasiDrivingType;
      if (params.sex === '1') {
        this.sexText = '男';
        this.sexValue = '1';
      } else {
        this.sexText = '女';
        this.sexValue = '2';
      }
      if (params.addType === '1') {
        this.licensePositiveUrl = params.drivingLicense;
        this.licenseReverseUrl = params.drivingLicenseEctype;
        this.licensePositiveImg = params.drivingLicense; // 回显行驶证正面
        this.licenseReverseImg = params.drivingLicenseEctype; // 回显行驶证正面
        this.abbreviation = params.first; // 车牌号第一位
        this.licenseplate = params.second; // 车牌号第二位
        this.carNumber = params.thirdly;
        this.carType = params.carModel; // 车辆型号
        this.carName = params.carOwner; // 车辆所有人
        this.carDate = moment(params.carRegDate, 'x').format('YYYY-MM-DD'); // 车辆注册日期
        this.totalPassenger = params.passengerVolume.toString(); //核定载客数
        this.mancarUrl = params.personAndCar;
        this.mancarImg = params.personAndCar; //人车合影
        this.licenseText = '重新上传';
        this.carPeopleText = '重新上传';
      }
      console.log(params);
    }
  },
  methods: {
    cancel() {
      this.cityModel = false;
      this.drivingTypeModel = false;
    },
    // 拉起身份证上传
    idImgBtn() {
      this.showcardIdphoto = true;
    },
    // 拉起驾驶证上传
    driverImgBtn() {
      this.showdriverlicensephoto = true;
    },
    // 拉起行驶证上传
    licenseImgBtn() {
      this.showcardphoto = true;
    },
    // 拉起人车合一上传
    carPeopleImgBtn() {
      this.showMancarphoto = true;
    },
    // AMPDistrictSearch(type) {
    //     AMap.plugin('AMap.DistrictSearch', () => {
    //         this.districtSearch = new AMap.DistrictSearch({
    //             // 关键字对应的行政区级别，country表示国家
    //             level: 'country',
    //             //  显示下级行政区级数，1表示返回下一级行政区
    //             subdistrict: 1
    //         });
    //         // 搜索所有省/直辖市信息
    //         this.districtSearch.search(type, (status, result) => {
    //             if (status === 'no_data') {
    //                 Dialog.alert({
    //                     title: '提示',
    //                     content: '获取不到数据',
    //                     confirmText: '确定'
    //                 });
    //                 return;
    //             }
    //             if (result.districtList[0].level === 'country') {
    //                 this.provinceData = result.districtList[0].districtList;
    //             } else if (result.districtList[0].level === 'province') {
    //                 this.cityData = result.districtList[0].districtList;
    //             } else if (result.districtList[0].level === 'city') {
    //                 this.countyData = result.districtList[0].districtList;
    //                 // this.countyName = this.countyData[0].name;
    //                 // this.countyCode = this.countyData[0].adcode;
    //             }
    //         });
    //     });
    // },
    // // 拉起选择省市区/县
    // chooseCityBtn() {
    //     this.isPopupShow = true;
    //     this.Isprovince = true;
    //     this.Iscity = false;
    //     this.Iscounty = false;
    // },
    // // 选择省
    // provinceBtn() {
    //     this.Isprovince = true;
    //     this.Iscity = false;
    //     this.Iscounty = false;
    // },
    // getprovince(name, provinceCode) {
    //     this.provinceName = name;
    //     this.provinceCode = provinceCode;
    //     this.Isprovince = false;
    //     this.Iscity = true;
    //     this.cityName = '市';
    //     this.countyName = '区/县';
    //     this.cityData = [];
    //     this.countyData = [];
    //     this.cityCode = '';
    //     this.countyCode = '';
    //     this.AMPDistrictSearch(provinceCode);
    // },
    // 选择市
    // cityBtn() {
    //     if (this.cityData.length === 0) {
    //         Toast({
    //             content: '请选择省',
    //             duration: 3000,
    //             hasMask: true
    //         });
    //         return false;
    //     }
    //     this.Isprovince = false;
    //     this.Iscity = true;
    //     this.Iscounty = false;
    // },
    // 获取市
    // getcity(name, cityCode) {
    //     this.cityName = name;
    //     this.cityCode = cityCode;
    //     this.Iscity = false;
    //     this.Iscounty = true;
    //     this.countyName = '区/县';
    //     this.countyData = [];
    //     this.countyCode = '';
    //     this.Isactive = '';
    //     this.AMPDistrictSearch(cityCode);
    // },
    // 选择区县
    // countyBtn() {
    //     if (this.countyData.length === 0) {
    //         Toast({
    //             content: '请选择市',
    //             duration: 3000,
    //             hasMask: true
    //         });
    //         return false;
    //     }
    //     this.Isprovince = false;
    //     this.Iscity = false;
    //     this.Iscounty = true;
    // },
    // 获取区县
    // getcounty(name, countyCode, index) {
    //     this.countyName = name;
    //     this.countyCode = countyCode;
    //     this.Isactive = index;
    // },
    // getregion() {
    //     if (this.cityName === '市') {
    //         Toast({
    //             content: '请选择市',
    //             duration: 3000,
    //             hasMask: true
    //         });
    //         return false;
    //     }
    //     if (this.countyName === '区/县') {
    //         Toast({
    //             content: '请选择区/县',
    //             duration: 3000,
    //             hasMask: true
    //         });
    //         return false;
    //     }
    //     this.cityNameText =
    //         this.provinceName.substring(0, 5) + ' ' + this.cityName.substring(0, 5) + ' ' + this.countyName.substring(0, 5);
    //     this.provinceRegion = 'province' + '_' + this.provinceName + '_' + this.provinceCode;
    //     this.cityRegion = 'city' + '_' + this.cityName + '_' + this.cityCode;
    //     this.countryRegion = 'district' + '_' + this.countyName + '_' + this.countyCode;
    //     this.cityModel = false;
    // },
    // 获取城市名称
    getCity() {
      this.cityModel = true;
    },
    // 获取城市
    cityTypeBtnConfirm() {
      let values = this.$refs.cityTypePicker.getColumnValues();
      this.provinceName = values[0].text;
      this.provinceCode = values[0].value.substring(0, 6);
      this.cityName = values[1].text;
      this.cityCode = values[1].value.substring(0, 6);
      this.countyName = values[2].text;
      this.countyCode = values[2].value.substring(0, 6);
      this.cityNameText =
        this.provinceName.substring(0, 5) + ' ' + this.cityName.substring(0, 5) + ' ' + this.countyName.substring(0, 5);
      this.provinceRegion = 'province' + '_' + this.provinceName + '_' + this.provinceCode;
      this.cityRegion = 'city' + '_' + this.cityName + '_' + this.cityCode;
      this.countryRegion = 'district' + '_' + this.countyName + '_' + this.countyCode;
      this.cityModel = false;
    },
    // 获取第一次领取驾驶证时间
    licenseShow() {
      this.isDatePickerShow = true;
    },
    onDatePickerConfirm() {
      this.licenseDate = this.$refs.datePicker.getFormatDate('yyyy-MM-dd');
    },
    // 获取性别
    getsex() {
      this.sexTypeModel = true;
    },
    sexTypeBtnConfirm() {
      this.sexTypeModel = false;
      let values = this.$refs.sexTypePicker.getColumnValues();
      this.sexText = values[0].value;
      if (this.sexText === '男') {
        this.sexValue = '1';
      } else {
        this.sexValue = '2';
      }
    },
    // 获取准驾车型
    drivingTypeBtn() {
      this.drivingTypeModel = true;
    },
    drivingTypeBtnConfirm() {
      this.drivingTypeModel = false;
      let values = this.$refs.drivingTypePicker.getColumnValues();
      this.drivingType = values[0].value;
    },
    // 获取车牌号
    getCardNumber() {
      this.isshowCardNumber = true;
    },
    carNumberConfirm() {
      const values = this.$refs.carNumbePicker.getColumnValues();
      let res = [];
      values.forEach(value => {
        res.push(value.text);
      });
      this.abbreviation = res[0]; // 省份简称
      this.licenseplate = res[1];
    },
    // 获取车辆注册时间
    carDtaeBtn() {
      this.isRegisterDatePickerShow = true;
    },
    onRegisterDatePickerConfirm() {
      this.carDate = this.$refs.registerdatePicker.getFormatDate('yyyy-MM-dd');
    },
    // 获取载客人数
    totalPassengerBtn() {
      this.totalPassengerModel = true;
    },
    totalPassengerBtnConfirm() {
      this.totalPassengerModel = false;
      let values = this.$refs.totalPassengerPicker.getColumnValues();
      this.totalPassenger = values[0].value;
    },
    // 身份证正面 微信上传
    identityPositiveUpload() {
      let type = '1';
      this.pullUpAppUpload(type);
    },
    // 身份证反面 微信上传
    identityReverseUpload() {
      let type = '2';
      this.pullUpAppUpload(type);
    },
    // 驾驶证正面 微信上传
    cardPositiveUpload() {
      let type = '3';
      this.pullUpAppUpload(type);
    },
    // 驾驶证反面 微信上传
    cardReverseUpload() {
      var type = '4';
      this.pullUpAppUpload(type);
    },
    // 行驶证正面 微信上传
    licensePositiveUpload() {
      let type = '5';
      this.pullUpAppUpload(type);
    },
    // 行驶证反面 微信上传
    licenseReverseUpload() {
      let type = '6';
      this.pullUpAppUpload(type);
    },
    // 人车合一 微信上传
    mancarReverseUpload() {
      let type = '7';
      this.pullUpAppUpload(type);
    },
    // 微信上传
    pullUpAppUpload(type) {
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: res => {
          wx.getLocalImgData({
            localId: res.localIds[0], // 图片的localID
            success: res => {
              if (
                Utils.getOSName()
                  .toLowerCase()
                  .indexOf('android') >= 0
              ) {
                res.localData = 'data:image/jpeg;base64,' + res.localData;
              }
              console.log(res.localData);
              this.weixinUpload(res.localData, type);
            }
          });
        }
      });
    },
    weixinUpload(data, type) {
      Loading.show('上传中');
      var date = new Date();
      let typeImg = ''; // 上传图片属于那种类型 例如 驾驶证 行驶证 正反面
      switch (type) {
        case '1':
          typeImg = 'identityPositive'; // 身份证正面
          break;
        case '2':
          typeImg = 'identityReverse'; // 身份证反面
          break;
        case '3':
          typeImg = 'cardPositive'; // 驾驶证正面
          break;
        case '4':
          typeImg = 'cardReverse'; // 驾驶证反面
          break;
        case '5':
          typeImg = 'licensePositive'; // 行驶证正面
          break;
        case '6':
          typeImg = 'licenseReverse'; // 行驶证反面
          break;
        case '7':
          typeImg = 'mancar'; // 车辆照片
          break;
      }
      var time = '' + date.getFullYear() + (date.getMonth() + 1) + date.getDate();
      var storeAs = 'intercity/' + typeImg + '/' + time + '-' + date.getTime() + '.jpg';
      // blob转arrayBuffer
      var reader = new FileReader();
      reader.readAsArrayBuffer(this.dataURLtoFile(data));
      reader.onload = event => {
        var buffer = new OSS.Buffer(event.target.result);
        client
          .put(storeAs, buffer, {})
          .then(results => {
            let imgUrl = 'https://img.padj.group/' + results.name; // 照片回显
            switch (type) {
              case '1':
                this.identityPositiveUrl = imgUrl;
                Loading.hide();
                break;
              case '2':
                this.identityReverseUrl = imgUrl;
                Loading.hide();
                break;
              case '3':
                this.cardPositiveUrl = imgUrl;
                Loading.hide();
                break;
              case '4':
                this.cardReverseUrl = imgUrl;
                Loading.hide();
                break;
              case '5':
                this.licensePositiveUrl = imgUrl;
                Loading.hide();
                break;
              case '6':
                this.licenseReverseUrl = imgUrl;
                Loading.hide();
                break;
              case '7':
                this.mancarUrl = imgUrl;
                Loading.hide();
                break;
            }
          })
          .catch(err => {
            Loading.hide();
            console.log(err);
          });
      };
    },
    // h5图片上传
    onImgComplete(name, file) {
      Loading.show('上传中');
      if (file.file.type === 'image/jpeg' || file.file.type === 'image/png') {
        var date = new Date();
        let typeImg = ''; // 上传图片属于那种类型 例如 驾驶证 行驶证 正反面
        switch (name) {
          case 'reader1':
            typeImg = 'identityPositive'; // 身份证正面
            break;
          case 'reader2':
            typeImg = 'identityReverse'; // 身份证反面
            break;
          case 'reader3':
            typeImg = 'cardPositive'; // 驾驶证正面
            break;
          case 'reader4':
            typeImg = 'cardReverse'; // 驾驶证反面
            break;
          case 'reader5':
            typeImg = 'licensePositive'; // 行驶证正面
            break;
          case 'reader6':
            typeImg = 'licenseReverse'; // 行驶证反面
            break;
          case 'reader7':
            typeImg = 'mancar'; // 车辆照片
            break;
        }
        var time = '' + date.getFullYear() + (date.getMonth() + 1) + date.getDate();
        var storeAs = 'intercity/' + typeImg + '/' + time + '-' + date.getTime() + '.' + file.file.name;
        // blob转arrayBuffer
        var reader = new FileReader();
        reader.readAsArrayBuffer(this.dataURLtoFile(file.dataUrl));
        reader.onload = event => {
          var buffer = new OSS.Buffer(event.target.result);
          client
            .put(storeAs, buffer, {})
            .then(results => {
              let imgUrl = 'https://img.padj.group/' + results.name; // 照片回显
              switch (name) {
                case 'reader1':
                  this.identityPositiveUrl = imgUrl;
                  Loading.hide();
                  break;
                case 'reader2':
                  this.identityReverseUrl = imgUrl;
                  Loading.hide();
                  break;
                case 'reader3':
                  this.cardPositiveUrl = imgUrl;
                  Loading.hide();
                  break;
                case 'reader4':
                  this.cardReverseUrl = imgUrl;
                  Loading.hide();
                  break;
                case 'reader5':
                  this.licensePositiveUrl = imgUrl;
                  Loading.hide();
                  break;
                case 'reader6':
                  this.licenseReverseUrl = imgUrl;
                  Loading.hide();
                  break;
                case 'reader7':
                  this.mancarUrl = imgUrl;
                  Loading.hide();
                  break;
              }
            })
            .catch(err => {
              Loading.hide();
              console.log(err);
            });
        };
      } else {
        Loading.hide();
        Dialog.alert({
          title: '提示',
          content: '图片格式错误',
          confirmText: '确定'
        });
      }
    },
    dataURLtoFile(dataurl) {
      const arr = dataurl.split(',');
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    // 身份证上传
    identityUploadBtn() {
      if (!this.identityPositiveUrl) {
        Toast({
          content: '请上传身份证正面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.identityReverseUrl) {
        Toast({
          content: '请上传身份证反面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      this.identityPositiveImg = this.identityPositiveUrl;
      this.identityReverseImg = this.identityReverseUrl;
      this.idText = '重新上传';
      this.showcardIdphoto = false;
    },
    // 驾驶证上传
    cardUploadBtn() {
      if (!this.cardPositiveUrl) {
        Toast({
          content: '请上传驾驶证正面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.cardReverseUrl) {
        Toast({
          content: '请上传驾驶证反面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      this.cardPositiveImg = this.cardPositiveUrl;
      this.cardReverseImg = this.cardReverseUrl;
      this.driverText = '重新上传';
      this.showdriverlicensephoto = false;
    },
    // 行驶证上传
    licenseUploadBtn() {
      if (!this.licensePositiveUrl) {
        Toast({
          content: '请上传行驶证正面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.licenseReverseUrl) {
        Toast({
          content: '请上传行驶证反面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      this.licensePositiveImg = this.licensePositiveUrl;
      this.licenseReverseImg = this.licenseReverseUrl;
      this.licenseText = '重新上传';
      this.showcardphoto = false;
    },
    // 人车合一
    mancarUploadBtn() {
      if (!this.mancarUrl) {
        Toast({
          content: '请上传人车合影',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      this.mancarImg = this.mancarUrl;
      this.carPeopleText = '重新上传';
      this.showMancarphoto = false;
    },
    // 身份证上传取消
    identityCannelBtn() {
      if (this.identityPositiveImg) {
        this.idText = '重新上传';
      } else {
        this.identityPositiveUrl = '';
        this.identityReverseUrl = '';
        this.idText = '请上传';
      }
      this.showcardIdphoto = false;
    },
    // 驾驶证上传取消
    driverLicenCannelBtn() {
      if (this.cardPositiveImg) {
        this.driverText = '重新上传';
      } else {
        this.cardPositiveUrl = '';
        this.cardReverseUrl = '';
        this.driverText = '请上传';
      }
      this.showdriverlicensephoto = false;
    },
    // 行驶证上传取消
    licenseCannelBtn() {
      if (this.licensePositiveImg) {
        this.licenseText = '重新上传';
      } else {
        this.licensePositiveUrl = '';
        this.licenseReverseUrl = '';
        this.licenseText = '请上传';
      }
      this.showcardphoto = false;
    },
    // 人车合影上传取消
    mancarCannelBtn() {
      if (this.mancarImg) {
        this.carPeopleText = '重新上传';
      } else {
        this.mancarUrl = '';
        this.carPeopleText = '请上传';
      }
      this.showMancarphoto = false;
    },
    codeBlur() {
      this.idNumber = this.idNumber.replace(/\s+/g, '').replace(/(\S{6})(\S{4})(\S{4})(\S{4})/g, '$1 $2 $3 $4');
    },
    // 提交申请
    driverSubBtn() {
      var reg = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X]|[x])$/;
      var regCard = /^[0-9a-zA-Z]+$/;
      var regTextfour = /^[\u4e00-\u9fa50-9a-zA-Z]+$/gi;
      var regTextfive = /^[\u4e00-\u9fa50-9a-zA-Z]+$/gi;
      if (this.cityNameText === '请选择') {
        Toast({
          content: '请选择服务城市',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.identityPositiveImg) {
        Toast({
          content: '请上传身份证正面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.identityReverseImg) {
        Toast({
          content: '请上传身份证反面面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.cardPositiveImg) {
        Toast({
          content: '请上传驾驶证正面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.identityReverseImg) {
        Toast({
          content: '请上传驾驶证反面照片',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.userName) {
        Toast({
          content: '请填写司机真实姓名',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (this.userName.length > 12) {
        Toast({
          content: '司机真实姓名长度超出',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!regTextfour.test(this.userName)) {
        Toast({
          content: '司机真实姓名格式错误',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.idNumber) {
        Toast({
          content: '请填写司机身份证号',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!reg.test(this.idNumber.replace(/\s+/g, ''))) {
        Toast({
          content: '请输入正确的二代18位身份证号',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (this.sexText === '请选择') {
        Toast({
          content: '请选择性别',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (this.licenseDate === '请选择') {
        Toast({
          content: '请选择初次领取驾驶证日期',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (this.$route.query.haveCar === '1') {
        if (this.drivingType === '请选择') {
          Toast({
            content: '请选择准驾车型',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        if (!this.licensePositiveImg) {
          Toast({
            content: '请上传行驶证正面照片',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        if (!this.licenseReverseImg) {
          Toast({
            content: '请上传行驶证反面照片',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        if (!this.carNumber) {
          Toast({
            content: '请填写车牌号',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        if (this.carNumber.length > 8) {
          Toast({
            content: '车牌号长度超出',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        if (!regCard.test(this.carNumber)) {
          Toast({
            content: '车牌号格式错误',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        if (!this.carType) {
          Toast({
            content: '请填写车辆型号',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        if (this.carType.length > 12) {
          Toast({
            content: '车辆型号长度超出',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        if (!this.carName) {
          Toast({
            content: '请填写车辆所有人',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        if (this.carName.length > 12) {
          Toast({
            content: '车辆所有人长度超出',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        if (!regTextfive.test(this.carName)) {
          Toast({
            content: '车辆所有人格式错误',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        if (this.carDate === '请选择') {
          Toast({
            content: '请选择车辆注册日期',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        if (this.totalPassenger === '请选择') {
          Toast({
            content: '请选择车辆核定载客数',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
        if (!this.mancarImg) {
          Toast({
            content: '请上传人车合影照片',
            duration: 3000,
            hasMask: true
          });
          return false;
        }
      }
      // 判断有车加入还是无车加入
      var data = null;
      if (this.$route.query.haveCar === '1') {
        data = {
          businessType: this.businessType,
          addType: this.iscar, // 有车加入还是无车加入 1 有车 2 无车
          drivingType: this.cate, // 司机类型 1 专职司机 2 兼职司机
          driverPhone: encryptByDESModeEBC(localStorage.getItem('drive_phone')), // 司机电话
          driverProvince: this.provinceRegion, // 司机地区
          driverCity: this.cityRegion, // 司机地区
          driverCountry: this.countryRegion, // 司机地区
          identityHeadPortrait: this.identityPositiveImg, // 身份证正
          identityNationalEmblem: this.identityReverseImg, // 身份证反
          drivingLicence: this.cardPositiveImg, // 驾驶证
          drivingLicenceReverse: this.cardReverseImg, // 驾驶证副页
          driverName: this.userName, // 司机姓名
          sex: this.sexValue, // 司机性别
          driverId: encryptByDESModeEBC(this.idNumber.replace(/\s+/g, '')), // 司机身份证号
          expiryInitiaLicenseDate: moment(this.licenseDate).valueOf(), // 初次领证日期
          quasiDrivingType: this.drivingType, // 准驾车型
          drivingLicense: this.licensePositiveImg, //行驶证
          drivingLicenseEctype: this.licenseReverseImg, //行驶证副页
          first: this.abbreviation, // 车牌号第一位
          second: this.licenseplate, // 车牌号第二位
          thirdly: this.carNumber, // 车牌号
          carModel: this.carType, //车辆型号
          carOwner: this.carName, //车辆所有人
          carRegistrationDate: moment(this.carDate).valueOf(), // 车辆注册日期
          passengerVolume: this.totalPassenger, //核定载客数
          personAndCar: this.mancarImg //人车合影
        };
      } else {
        data = {
          businessType: this.businessType,
          addType: this.iscar, // 有车加入还是无车加入 1 有车 2 无车
          drivingType: this.cate, // 司机形式 1 专职司机 2 兼职司机
          driverPhone: encryptByDESModeEBC(localStorage.getItem('drive_phone')), // 司机电话
          driverProvince: this.provinceRegion, // 司机地区
          driverCity: this.cityRegion,
          driverCountry: this.countryRegion,
          identityHeadPortrait: this.identityPositiveImg, // 身份证正
          identityNationalEmblem: this.identityReverseImg, // 身份证反
          drivingLicence: this.cardPositiveImg, // 驾驶证
          drivingLicenceReverse: this.cardReverseImg, // 驾驶证副页
          driverName: this.userName, // 司机姓名
          sex: this.sexValue, // 司机性别
          driverId: encryptByDESModeEBC(this.idNumber.replace(/\s+/g, '')), // 司机身份证号
          expiryInitiaLicenseDate: moment(this.licenseDate).valueOf(), // 初次领证日期
          quasiDrivingType: this.drivingType // 准驾车型
        };
      }
      Loading.show();
      http.post('pakj/driver/driverRecruit', data).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          Dialog.alert({
            title: '提交成功',
            content: '请等待审核',
            confirmText: '确定',
            onConfirm: () => {
              this.$router.push({
                name: 'recruitwait'
              });
              sessionStorage.clear();
            }
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    // 设置头部信息
    setHeader(text) {
      /* eslint-disable */
      var os = Utils.getOSName();
      if ((os == 'Linux' || os == 'Android') && handler) {
        //  handler.setTopText(JSON.stringify(text));
      } else if ((os == 'iOS' || os == 'MacOSX') && window.webkit) {
        window.webkit.messageHandlers.setTopText.postMessage(text);
      }
    }
  }
};
</script>

<style type="text" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6 {
  display: block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}
.info_list p {
  height: 88px;
  line-height: 88px;
  color: #333;
  font-size: 32px;
  padding: 0px 30px;
  border-bottom: solid 1px #eee;
}
.info_list h6 {
  height: 88px;
  line-height: 88px;
  color: #333;
  font-size: 32px;
  padding: 0px 30px;
  background-color: #eee;
  font-weight: 400;
}
.info_list p span {
  float: right;
}
.info_list p span em {
  font-style: normal;
  color: #999;
}
.info_list p span img {
  width: 25px;
  margin-left: 5px;
  position: relative;
  top: 5px;
}
.info_list p em input {
  height: 70px;
  outline: none;
  border: none;
  width: 350px;
  text-align: right;
  font-size: 32px;
  color: #999;
}
.btn_sub {
  height: 88px;
  line-height: 88px;
  color: #fff;
  background-color: #ff6917;
  font-size: 32px;
  text-align: center;
  margin: 30px 30px;
  border-radius: 7px;
}
.pop_box {
  background-color: #fff;
  height: 700px;
}

.pop_box_hd {
  border-top: solid 1px #efefef;
  height: 80px;
  border-bottom: solid 1px #efefef;
}

.pop_box_hd ul li {
  width: 33.33%;
  float: left;
  font-size: 28px;
  color: #333;
  list-style: none;
  line-height: 80px;
  position: relative;
}

.pop_box_hd ul li p {
  margin-left: 40px;
  width: 210px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pop_box_hd ul li span {
  position: absolute;
  top: 8px;
  right: 10px;
}

.pop_box_hd ul li img {
  width: 30px;
}

.city_list {
  height: 560px;
  width: 100vw;
  overflow: hidden;
  overflow-y: auto;
}

.city_list ul li {
  border-bottom: solid 1px #efefef;
  height: 80px;
  line-height: 80px;
  padding: 0px 40px;
  font-size: 28px;
  color: #333;
}

.city_list ul li.active {
  color: #ff6917;
}
.card_number_ct {
  position: relative;
}
.card_number {
  position: absolute;
  top: 20px;
  left: 200px;
  width: 156px;
  height: 50px;
  border-radius: 6px;
  border: 1px solid rgba(224, 224, 224, 1);
  z-index: 100;
}

.card_number span {
  display: inline-block;
  line-height: 50px;
  height: 50px;
  width: 76px;
  text-align: center;
  overflow: hidden;
}

.card_number span b {
  font-weight: 400;
}

.card_number i {
  height: 40px;
  width: 1px;
  background-color: #999999;
  display: inline-block;
  line-height: 40px;
  position: absolute;
  top: 5px;
  left: 70px;
}

.card_number span img {
  width: 40px;
  position: relative;
  top: 8px;
}
.showcardphoto {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.showcardimg_box {
  width: 600px;
  margin: auto;
}

.showcardimg_box p {
  margin-top: 10px;
  position: relative;
}

.showcardimg_box p img {
  width: 600px;
  height: 340px;
}
.md-image-reader {
  width: 600px;
  height: 340px;
}
.showcardimg_box p span {
  width: 200px;
  height: 88px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  display: inline-block;
  line-height: 88px;
  text-align: center;
  font-size: 30px;
  color: #fff;
  position: absolute;
  top: 128px;
  left: 200px;
}

.showcardtext h6 {
  text-align: center;
  font-size: 32px;
  color: #ff6917;
  font-weight: 400;
}

.showcardtext p {
  color: #fff;
  font-size: 28px;
  text-align: center;
  width: 450px;
  margin: auto;
  padding-top: 10px;
}

.cardBtn {
  margin: 10px 40px;
}

.cardcannel {
  width: 200px;
  display: inline-block;
  height: 98px;
  line-height: 98px;
  text-align: center;
  font-size: 36px;
  color: #ff6917;
  background-color: #fff;
  border-radius: 10px;
}

.cardupload {
  width: 440px;
  display: inline-block;
  height: 98px;
  line-height: 98px;
  text-align: center;
  font-size: 36px;
  color: #fff;
  background-color: #ff6917;
  margin-left: 30px;
  border-radius: 10px;
}

.personalpoto {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
</style>
